<template>
  <transition name="opacity-fade">
    <div :style="{ 'background-color': backgroundColor, 'padding': padding+' 0', 'z-index': zIndex }" class="con-view">
      <el-card v-loading="loading" :style="{ 'width': width}" :body-style="bodyStyle" class="create-card-container">
        <slot name="header" />
        <slot />
      </el-card>
    </div>
  </transition>
</template>

<script type="text/javascript">
export default {
  name: 'CreateView',
  components: {},
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    backgroundColor: {
      type: String,
      default: '#F5F6F9'
    },
    width: {
      type: String,
      default: '1200px'
    },
    padding: {
      type: String,
      default: '40px'
    }
  },
  data() {
    return {
      zIndex: this.$common.getMaxIndex(),
      loadingObj: null
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
/* 过渡动画 */
.opacity-fade-enter-active, .opacity-fade-leave-active {
  transition: all 0.2s;
}
.opacity-fade-enter, .opacity-fade-leave-to {
  opacity: 0;
}
/** 容器布局 */
.con-view {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  .create-card-container {
    margin: 0 auto;
    height: 100%;
  }
}
</style>
